<template>
  <div class="big-page">
    <page-header menu="SmartLogistics"></page-header>
    <div class="show-layout">
      <div class="pager" :class="{'hide': page===1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <div class="search-wrapper" v-if="page===1"></div>
          <div class="search-wrapper" v-if="page===2"></div>
          <common-chart :chart-type="'bar'" size="big" :data="chart1" v-if="page===1"></common-chart>
          <common-chart :chart-type="'pie'" size="big" :data="chart2" v-if="page===2"></common-chart>
        </div>
      </div>
      <div class="pager" :class="{'hide': page===2}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
export default {
  name: 'SmartCatering',
  data () {
    return {
      page: 1,
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartCatering', id: '21' },
        title: '最受欢迎菜品排行',
        xAxis: [],
        series: [],
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartCatering', id: '21' },
        title: '最受欢迎菜品排行',
        series: [],
        tooltip: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '2' } })
    },
    init () {
      if (this.page === 1) {
        this.getChart1()
      } else if (this.page === 2) {
        this.getChart2()
      }
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 2) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    },
    async getChart1 () {
      this.page = -1
      setTimeout(() => {
        this.page = 1
        this.chart1.title = '最受欢迎菜品排行'
        this.chart1.xAxis = [
          { data: ['鸡蛋牛肉面', '黑椒牛肉面', '土豆肥牛', '爆浆排骨肉盖浇饭', '红烧茄子盖浇饭'] }
        ]
        this.chart1.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#02BBFF',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
          },
          data: [500, 480, 460, 350, 300, 250, 230]
        }]
      }, 200)
    },
    async getChart2 () {
      this.page = -1
      setTimeout(() => {
        this.page = 2
        this.chart2.title = '最受欢迎菜品'
        this.chart2.series = [
          {
            name: '最受欢迎菜品',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['50%', '50%'],
            tooltip: {
              trigger: 'item',
              formatter: '{b}:{c}\n({d}%)'
            },
            label: {
              show: true,
              textStyle: { color: '#fff', fontSize: 18 },
              formatter: '{b}:{c}\n({d}%)'
            },
            data: [
              { value: 500, name: '鸡蛋牛肉面', itemStyle: { color: '#FF8955' } }, { value: 450, name: '黑椒牛肉面', itemStyle: { color: '#FFD200' } },
              { value: 400, name: '土豆肥牛', itemStyle: { color: '#EB811A' } }, { value: 350, name: '爆浆排骨肉盖浇饭', itemStyle: { color: '#FF5454' } },
              { value: 300, name: '香辣鸡脆骨盖浇饭', itemStyle: { color: '#0120EB' } }, { value: 250, name: '红烧茄子盖浇饭', itemStyle: { color: '#4fa14d' } }
            ]
          }
        ]
      }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
.big-page {
  :deep(.el-input) {
    background-color: rgba(255, 255, 255, 0);
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0);
      border-color: rgba(255, 255, 255, 0);
      color: #fff;
    }
  }
}

</style>
